<!DOCTYPE html>
<html lang="ch-ZN">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品详情</title>
    <link rel="stylesheet" href="../../lib/css/reset.min.css">
    <link rel="stylesheet" href="../../lib/css/swiper.min.css">
    <link rel="stylesheet" href="../../lib/css/animate.min.css">
    <link rel="stylesheet" href="../../lib/css/mint_style.css">
    <link rel="stylesheet" href="../../css/all.min.css">
    <script src="../../lib/js/flexible.js"></script>
    <script src="../../lib/js/fastclick.js"></script>
</head>

<body ontouchstart>

    <div class="app-wrap bg-gary" id="product" v-cloak>
        <!-- 头部 -->
        <div class="product-topNav bg-white">
            <i class="icon-back-product ml-48" onclick="globalBack()"></i>
            <div class="title-items">
                <span class="item cur"><a href="javascript:;">商品</a></span>
                <span class="item"><a :href=`../../html/product/product_detail.html?productId=${product.productId}`>详情</a></span>
                <span class="item"><a :href=`../../html/product/product_comment.html?productId=${product.productId}`>评价</a></span>
            </div>
            <div class="icon-wrap mr-48">
                <i onclick="toShopCart()" class="icon-cart-product mr-48"></i>
                <div onclick="toMessage()" class="msg">
                    <i class="icon-msg-product"></i>
                    <b>6</b>
                </div>
            </div>
        </div>

        <!-- scroll banner -->
        <div class="swiper-container product-scroll bg-white" id="product_scroll">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="image in scrollImages">
                    <img v-if='image.type=="coverImg"' :src="image.path" alt="">
                    <video v-else='image.type=="vido"' :src="image.path" controls></video>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>

        <!-- 团购/秒杀状态 -->
        <div class="product-status-wrap" v-show="status>1">
            <div class="status-left p-30">
                <p class="sell-price">
                    ￥<span class="big">{{statusInfo.sellPrice}}</span>.00
                </p>
                <div class="status-left-r">
                    <del class="origin-price">￥{{statusInfo.originPrice}}</del>
                    <div class="join-info">
                        <span class="count">{{statusInfo.joinCount}}</span>人参与
                    </div>
                </div>
            </div>
            <div class="status-right">
                <p v-if="status==2" class="text">{{statusInfo.startTime}}开团</p>
                <p v-else class="text">距结束仅剩</p>
                <p class="time-leave">
                    <span class="time">{{day}}</span>
                    <span class="dot">:</span>
                    <span class="time">{{hour}}</span>
                    <span class="dot">:</span>
                    <span class="time">{{minute}}</span>
                    <span class="dot">:</span>
                    <span class="time">{{second}}</span>
                </p>
                <div class="triangle-left"></div>
            </div>
        </div>

        <!-- 商品信息 -->
        <div class="product-info-wrap p-30 bg-white">
            <h1 class="tit">{{product.introduce}}</h1>
            <div class="price-wrap"><span class="price"><em>￥</em>{{product.showPrice}}</span><span class="tag" v-if="product.priceTag"></span></div>
            <div class="oldPrice-wrap" v-if="product.oldPrice"><span class="oldPrice">价格<em>￥</em></span></div>
            <div class="other-info">
                <span class="kuaidi">快递：<em>{{product.freight}}</em></span>
                <span class="saleNum">月销{{product.monthlySales}}</span>
                <span class="productAddress">{{product.provinceName}}{{product.cityName}}</span>
            </div>
        </div>

        <!-- 优惠 -->
        <div class="welfare-wrap bg-white p-30">
            <!-- 优惠券 -->
            <div class="content">
                <div class="ticket">
                    <span class="icon-welfare-ticket"></span>
                    <h2 class="name"></h2>
                </div>
                <button class="btn" @click='getShopCouponList()'>领取</button>
            </div>
            <!-- 积分 -->
            <!-- <div class="content">
        <div class="detail">
          <div class="tag">{{popBoxInfo.jifen.list[0].tag}}</div>
          <h2 class="name">{{popBoxInfo.jifen.list[0].name}}</h2>
        </div>
        <div class="icon-more-btn" @click='callPopBoxInfo(1,popBoxInfo.jifen.list)'></div>
      </div> -->

            <!-- 基础保障 -->
            <div class="content">
                <div class="tags">
                    <span v-for="(item,index) in baseService" :key="index">{{item|baseService}}</span>
                </div>
                <!-- <div class="icon-more-btn" @click='callPopBoxInfo(2,popBoxInfo.guarantee.list)'></div> -->
            </div>
            <!-- 满赠 -->
            <!-- <div class="content">
        <div class="detail">
          <div class="tag">{{popBoxInfo.manzeng.list[0].tag}}</div>
          <h2 class="name">{{popBoxInfo.manzeng.list[0].name}}</h2>
        </div>
        <div class="icon-more-btn" @click='callPopBoxInfo(3,popBoxInfo.manzeng.list)'></div>
      </div> -->

            <div class="content" v-show="status==2||status==3||status==4" @click='callPopBoxInfo(6,popBoxInfo.manzeng.list)'>
                <div class="detail">
                    <h2 class="name no-ml">参团规则</h2>
                </div>
                <div class="icon-more-btn"></div>
            </div>
        </div>
        <!-- 颜色尺寸分类 -->
        <div class="sel-wrap bg-white p-30">
            <!-- 产品参数 -->
            <div class="content" @click='callPopBoxInfo(4,productParams)'>
                <div class="sel-style">
                    <h2 class="name">产品参数</h2>
                </div>
                <div class="icon-more-btn"></div>
            </div>
            <!-- 选择颜色分类 -->
            <div class="content" @click='getProductSize'>
                <div class="sel-style">
                    <h2 class="name">选择颜色分类，尺寸</h2>
                </div>
                <div class="icon-more-btn"></div>
            </div>
        </div>
        <!-- 用户评价 -->


        <div class="comment-wrap bg-white p-30">
            <div class="hd">
                <span class="tit">评价({{commentList.length}})</span>
                <span class="rate">好评度<em>{{commentCount.goodCount | starRating(commentCount.totalCount)}}%</em></span>
            </div>
            <div class="bd">
                <div class="comment-section" v-for="comment in commentList">
                    <div class="head">
                        <div class="head-l">
                            <img :src="comment.picImg" alt="">
                            <span>{{comment.userName}}</span>
                        </div>
                        <div class="head-r">
                            <div class="rating">
                                <span class="icon-ratign" v-for="num in comment.commodityDescription"></span>
                            </div>
                        </div>
                    </div>
                    <div class="con">
                        <p class="comment">{{comment.content}}</p>
                        <div class="img" v-if="comment.picture">
                            <img v-for="img in comment.picture.split(',')" :src="img" alt="" v-if="img">
                        </div>
                        <div class="info">
                            <span class="time">{{comment.createTime | format}}</span>
                            <span v-if="comment.color">颜色分类:{{comment.color}};</span>
                            <span v-if="comment.size">尺寸:{{comment.size}}</span>
                        </div>
                    </div>
                </div>
                <div class="more">
                    <button>查看全部评价</button>
                </div>
            </div>
        </div>

        <!-- 商铺信息 -->
        <div class="vendor-wrap bg-white">
            <div class="hd p-30">
                <div class="img">
                    <img :src="shopInfo.shopLogo" alt="">
                </div>
                <div class="tit">
                    <h1>{{shopInfo.shopName}}</h1>
                    <p>{{shopInfo.slogan}}</p>
                </div>

            </div>
            <div class="bd p-30">
                <div class="count">
                    <div class="item"><span>{{shopInfo.newProductNum}}</span><span>店铺上新</span></div>
                    <div class="item"><span>{{shopInfo.allProductNum}}</span><span>全部商品</span></div>
                    <div class="rating">
                        <p class="sec">描述<span>{{shopInfo.depict}}</span></p>
                        <p class="sec">服务<span>{{shopInfo.service}}</span></p>
                        <p class="sec">物流<span>{{shopInfo.logistics}}</span></p>
                    </div>
                </div>
            </div>
        </div>


        <!-- 滑动查看更多 -->

        <div class="slide-more bg-gary">
            <span>继续拖动，查看图文详情</span>
        </div>


        <!-- 悬浮的购物车图标 -->
        <div onclick="toShopCart()" v-show="status==0" class="hover-cart"> </div>
        <!-- 底部fixed buttons -->
        <div class="fixed-btns bg-white">
            <div class="item-left">
                <div class="item"><em class="icon-ft-fixed-connect"></em><span>客服</span></div>
                <div class="item"><em class="icon-ft-fixed-shop"></em><span>店铺</span></div>
                <div class="item"><em class="icon-ft-fixed-favor"></em><span>收藏</span></div>
            </div>
            <!-- 正常状态 -->
            <div class="item-right" v-if="status==0">
                <div class="item bg-orange" @click="addCart"><span>加入购物车</span></div>
                <div v-if="product.isCustomized==1" class="item bg-red" @click="buyNow"><span>立即购买</span></div>
                <div v-else="product.isCustomized==0" class="item bg-red" @click="callPopBoxInfo(6,popBoxInfo.dingzhiParams.params)"><span>开始定制</span></div>
            </div>
            <!-- 未开团 -->
            <!-- <div class="item-right" v-else-if="status==2">
        <div class="item bg-orange">
          <div class="status-fixed-btns">
            <p class="line1">￥260</p>
            <p>单独购买</p>
          </div>
        </div>
        <div class="item bg-red">
          <div class="status-fixed-btns">
            <p class="line1">￥240</p>
            <p>5人团</p>
          </div>
        </div>
      </div> -->
            <!-- 已开团-未参团 -->
            <!-- <div class="item-right" v-else-if="status==3">
        <div class="item bg-orange">
          <div class="status-fixed-btns">
            <p class="line1">￥260</p>
            <p>单独购买</p>
          </div>
        </div>
        <div class="item bg-red">
          <div class="status-fixed-btns">
            <p class="line1">￥240</p>
            <p>立即参团</p>
          </div>
        </div>
      </div> -->
            <!-- 已开团-已参团 -->
            <!-- <div class="item-right" v-else-if="status==4">
        <div class="item bg-orange">
          <div class="status-fixed-btns">
            <p class="line1">￥260</p>
            <p>单独购买</p>
          </div>
        </div>
        <div class="item bg-red">
          <span>拼团详情</span>
        </div>
      </div> -->
            <!-- 秒杀中 -->
            <!-- <div class="item-right" v-else-if="status==5">
        <div class="item bg-orange">
          <span>加入购物车</span>
        </div>
        <div class="item bg-red">
          <span>即刻秒杀</span>
        </div>
      </div> -->
        </div>

        <!-- 弹出框 -->
        <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
            <div class="lay-wrap" v-show="popBoxInfoFlag">
                <div class="layer" @click.stop="closeBoxInfo()"></div>
                <!-- pop box 展示更多信息 -->
                <transition-group enter-active-class="animated slideInUp" leave-active-class="animated slideOutDown">
                    <!-- 店铺优惠券 -->
                    <div v-show="popBoxInfoFlag" v-if="popBoxInfoType==0" class="popBox-tickets bg-gary" :key="popBoxInfoType">
                        <!-- 头部 -->
                        <div class="hd bg-gary">
                            <h1>领取优惠券</h1>
                            <em @click.stop="closeBoxInfo()"><i></i></em>
                        </div>
                        <!-- 内容部分 -->
                        <div class="bd p-30">
                            <ul class="ticket-list">
                                <div class="item" v-for="item in popBoxInfoBus" @click="getCoupon(item)">
                                    <div class="item-l">
                                        <span class="money"><em>¥</em>{{item.faceValue}}</span>
                                        <span class="tips">满{{item.useCondition}}元可用</span>
                                    </div>
                                    <div class="item-r">
                                        <span class="warn">{{item.couponName}}</span>
                                        <span class="time-tips">使用期限：</span>
                                        <span class="time">{{item.startTime}}-{{item.endTime}}</span>
                                    </div>
                                </div>
                            </ul>
                        </div>
                        <!-- 底部按钮 -->
                        <!-- <div class="ft">
                            <span @click.stop="closeBoxInfo()">完成</span>
                        </div> -->
                    </div>


                    <!-- 积分弹框 -->
                    <div v-show="popBoxInfoFlag" v-if="popBoxInfoType==1" class="popBox-moreInfoItems bg-white" :key="popBoxInfoType">
                        <!-- 头部 -->
                        <div class="hd bg-white">
                            <h1>{{popBoxInfo.jifen.title}}</h1>
                            <em @click.stop="closeBoxInfo()"><i></i></em>
                        </div>
                        <!-- 内容部分 -->
                        <div class="bd p-30">
                            <div class="item-wrap">
                                <div class="item" v-for="item in popBoxInfoBus">
                                    <span class="tag" :class={gray:item.colorFlag}>{{item.tag}}</span>
                                    <p class="con">{{item.name}}</p>
                                </div>
                            </div>
                        </div>
                        <!-- 底部按钮 -->
                        <div class="ft">
                            <span @click.stop="closeBoxInfo()">完成</span>
                        </div>
                    </div>


                    <!-- 正品保障 -->
                    <div v-show="popBoxInfoFlag" v-if="popBoxInfoType==2" class="popBox-guarantee bg-white" :key="popBoxInfoType">
                        <!-- 头部 -->
                        <div class="hd bg-white">
                            <h1>{{popBoxInfo.guarantee.title}}</h1>
                            <em @click.stop="closeBoxInfo()"><i></i></em>
                        </div>
                        <!-- 内容部分 -->
                        <div class="bd p-30">
                            <div class="guarantee-list">
                                <div class="item" v-for="(item,index) in popBoxInfoBus" :key="index">
                                    <h1>{{item.tag}}</h1>
                                    <p>{{item.name}}</p>
                                </div>
                            </div>
                        </div>
                        <!-- 底部按钮 -->
                        <div class="ft">
                            <span @click.stop="closeBoxInfo()">完成</span>
                        </div>
                    </div>



                    <!-- 满赠弹框 -->
                    <div v-show="popBoxInfoFlag" v-if="popBoxInfoType==3" class="popBox-moreInfoLists bg-white" :key="popBoxInfoType">
                        <!-- 头部 -->
                        <div class="hd bg-white">
                            <h1>{{popBoxInfo.manzeng.title}}</h1>
                            <em @click.stop="closeBoxInfo()"><i></i></em>
                        </div>
                        <!-- 内容部分 -->
                        <div class="bd p-30">
                            <div class="item-wrap">
                                <div class="item" v-for="item in popBoxInfoBus">
                                    <span class="tag" :class={gray:item.colorFlag}>{{item.tag}}</span>
                                    <p class="con">{{item.name}}</p>
                                </div>
                            </div>
                        </div>
                        <!-- 底部按钮 -->
                        <div class="ft">
                            <span @click.stop="closeBoxInfo()">完成</span>
                        </div>
                    </div>




                    <!-- 产品参数 -->
                    <div v-show="popBoxInfoFlag" v-if="popBoxInfoType==4" class="popBox-moreInfoParams bg-white" :key="popBoxInfoType">
                        <!-- 头部 -->
                        <div class="hd bg-white">
                            <h1>产品参数</h1>
                            <em @click.stop="closeBoxInfo()"><i></i></em>
                        </div>
                        <!-- 内容部分 -->
                        <div class="bd p-30">
                            <div class="item-wrap">
                                <div class="item" v-for="item in productParams">
                                    <span class="tag">{{item.specName}}</span>
                                    <p class="con">{{item.valueName}}</p>
                                </div>
                            </div>
                        </div>
                        <!-- 底部按钮 -->
                        <div class="ft">
                            <span @click.stop="closeBoxInfo()">完成</span>
                        </div>
                    </div>

                    <!-- 选择尺寸 -->
                    <div v-show="popBoxInfoFlag" v-if="popBoxInfoType==5" class="popBox-selParams bg-white" :key="popBoxInfoType">
                        <!-- 头部 -->
                        <div class="hd bg-white pb-48">
                            <div class="hd-l ml-48">
                                <img :src="popBoxInfoBus[producrSizeMainSel].colorCoverPic" alt="">
                            </div>
                            <div class="hd-r ml-64">
                                <span class="price">¥{{popBoxInfoBus[producrSizeMainSel].productColorSizeList[producrSizeSecSel].price}}</span>
                                <span class="id">商品编号:{{popBoxInfoBus[producrSizeMainSel].productId}}</span>
                            </div>
                        </div>
                        <!-- 内容部分 -->
                        <div class="bd m-48 pt-60">
                            <div class="zone-wrap">
                                <h1>颜色</h1>
                                <ul class="mainList">
                                    <li v-for="(item,index) in popBoxInfoBus" :key="index" :class="{cur:index==producrSizeMainSel}" @click='selParams(index,"colorName",item.colorName)'>{{item.colorName}}</li>
                                </ul>
                            </div>
                            <div class="zone-wrap">
                                <h1>尺码</h1>
                                <ul class="list">
                                    <li v-for="(item,index) in popBoxInfoBus[producrSizeMainSel].productColorSizeList">
                                        <input class="radioSel" type="radio" name="sizeSel" :class="{cur:index==producrSizeSecSel}" @click='selSecParams(index,"sizeName",item.name)'>
                                        <span class="label">{{item.name}}</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- 底部按钮 -->
                        <div class="ft bg-white">
                            <div class="counter-wrap m-48">
                                <h1>数量</h1>
                                <counter :buynum="buyNum"></counter>
                            </div>
                            <div class="btn-wrap">
                                <span class="bg-orange" @click="addCart">加入购物车</span>
                                <span class="bg-red" @click="buyNow">立即购买</span>
                            </div>
                        </div>
                    </div>

                    <!-- 开始定制 -->

                    <div v-show="popBoxInfoFlag" v-if="popBoxInfoType==6" class="popBox-selParams bg-white scroll" :key="popBoxInfoType">
                        <!-- 头部 -->
                        <div class="hd bg-white">
                            <div class="hd-r pl-48">
                                <span class="price"><span>商品价格：</span>¥{{customParam.productColorAndSiz[customMainSel].productColorSizeList[customSecSel].price}}</span>
                                <span class="remain"><span>库存数量：</span>{{customParam.productColorAndSiz[customMainSel].productColorSizeList[customSecSel].number}}</span>
                            </div>
                        </div>
                        <!-- 内容部分 -->
                        <div class="bd">
                            <div class="zone-title">
                                <span class="pl-48">服饰定制</span>
                            </div>
                            <div class="zone-wrap m-48">
                                <h1>颜色</h1>
                                <ul class="mainList">
                                    <li v-for="(item,index) in customParam.productColorAndSiz" :key="index" :class="{cur:index==customMainSel}" @click="selParams(index)">{{item.colorName}}</li>
                                </ul>
                            </div>
                            <div class="zone-wrap m-48">
                                <h1>尺码</h1>
                                <div class="list">
                                    <li v-for="(item,index) in customParam.productColorAndSiz[customMainSel].productColorSizeList" :key="index">
                                        <input class="radioSel" type="radio" name="listSel1" @click="selSecParams(index)">
                                        <span class="label">{{item.name}}</span>
                                    </li>
                                </div>
                            </div>
                            <!-- 多重定制属性 -->
                            <div class="zone-wrap m-48" v-for="customItem in customParam.customizationVos">
                                <h1>{{customItem.customizatName}}</h1>
                                <!-- 图片list -->
                                <div class="imgSel pb-48">
                                    <div class="item" v-for="item in customItem.attributeCustomizations">
                                        <img :src="item.imgUrl" alt="">
                                        <input type="checkbox">
                                        <span>{{item.name}}</span>
                                        <b class="circle"></b>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <!-- 底部按钮 -->
                        <div class="ft bg-white">
                            <div class="counter-wrap m-48">
                                <h1>数量</h1>
                                <counter></counter>
                            </div>
                            <div class="btn-wrap">
                                <span class="bg-orange">加入购物车</span>
                                <span class="bg-red">立即购买</span>
                            </div>
                        </div>
                    </div>

                    <!-- 参团规则弹框 -->
                    <div v-show="popBoxInfoFlag" v-if="popBoxInfoType==7" class="popBox-moreInfoItems bg-white" :key="popBoxInfoType">
                        <!-- 头部 -->
                        <div class="hd p-30">
                            <h1>参团规则</h1>
                            <em @click.stop="closeBoxInfo()"><i></i></em>
                        </div>
                        <!-- 内容部分 -->
                        <div class="bd">
                            <div class="tuan-d-rule bg-white mt-30">
                                <div class="steps">
                                    <div class="step"><span class="num">1</span>
                                        <p class="text">选择商品</p>
                                    </div>
                                    <div class="step"><span class="num">2</span>
                                        <p class="text">开团/参团</p>
                                    </div>
                                    <div class="step"><span class="num">3</span>
                                        <p class="text">邀请好友</p>
                                    </div>
                                    <div class="step"><span class="num">4</span>
                                        <p class="text">人满成团</p>
                                    </div>
                                </div>
                                <ul class="rule-list p-48">
                                    <li>1.开团：在商城内喜欢的商品，点击“去开团”，付款成功后 即为开团成功；</li>
                                    <li>2.参团：进入朋友分享的页面，点击“立即参团”，付款后即 为参团成功，若多人同时支付，按先支付成功的用户获得参团 资格；</li>
                                    <li>3.成团：在开团或参团之后，可以点击“分享出去”，在有效 时间凑齐团人数及拼团成功；</li>
                                    <li>4.组团失败：在有效时间内为凑齐人数，即为组团失败，此时 商城会将原款分别退回；</li>
                                </ul>
                            </div>
                        </div>
                        <!-- 底部按钮 -->
                        <div class="ft">
                            <span @click.stop="closeBoxInfo()">完成</span>
                        </div>
                    </div>
                </transition-group>
            </div>
        </transition>
    </div>
    <script src="../../lib/js/vue.js"></script>
    <script src="../../lib/js/axios.min.js"></script>
    <script src="../../lib/js/swiper.min.js"></script>
    <script src="../../lib/js/mint_index.js"></script>
    <!-- mock 数据 打包发布的时候记得移除 -->
    <script src="../../lib/js/mock.js"></script>
    <script src="../../js/all.min.js"></script>
    <script>
        // 调用商品详情js
        product();
    </script>
</body>

</html>